<div class="root" v-if="pageLoaded">
    <list class="list-wrapper">
        <!--图片轮播-->
        <cell>
            <div class="slider-wrapper">
                <slider class="slider" interval="4000" auto-play="true" infinite="true" @change="indicatorChange">
                    <div class="slider-item" v-for="(i,index) in imageList">
                        <image class="slider-item-img" resize="cover" :src="i"></image>

                        <!--角标（商品详情第一张图片打角标）-->
                        <image resize="cover" v-if="index == 0 && goodsInfo.goodslogourl" class="goods-mark-img" :src="goodsInfo.goodslogourl"></image>
                        <!--/角标-->
                    </div>
                </slider>

                <div class="slider-indicator" v-if="imageList.length > 1">
                    <div :class="['indicator-bar',indicatorIndex == $index ? 'indicator-bar-active' : 'indicator-bar-common']" v-for="(i,$index) in imageList"></div>
                </div>
            </div>
        </cell>
        <!--图片轮播-->

        <!--商品信息-->
        <cell class="cell-panel">
            <div class="goods-info">
                <text class="goods-info-tit font-msyhl">{{goodsInfo.title}}{{goodsInfo.goodsunit}}</text>

                <div class="goods-info-main">
                    <div class="goods-info-price">
                        <text class="goods-price font-msyhl">{{goodsInfo.price | currency('¥')}}</text>
                        <text class="goods-activity-label font-msyhl" v-if="goodsInfo.price_attribute">{{'(' + goodsInfo.price_attribute + ')'}}</text>
                        <text class="goods-old-price font-msyhl" v-if="goodsInfo.market_price">{{goodsInfo.market_price | currency('¥')}}</text>
                    </div>

                    <text class="goods-city font-msyhl">{{goodsInfo.city}}</text>
                </div>
            </div>

            <div class="goods-activity" v-if="goodsInfo.shop_sales">
                <div class="row-act" v-for="(act, k) in goodsInfo.shop_sales">
                    <image resize="cover" class="act-img" :src="act.img"></image>
                    <text class="act-txt font-msyhl">{{act.left}}</text>
                    <text class="act-txt font-msyhl" v-if="act.right">{{act.right}}</text>
                    <!--倒计时-->
                    <count-down v-if="k=='qg' && goodsInfo.sys_time && goodsInfo.end_time"
                                :beginStr="goodsInfo.sys_time" :endStr="goodsInfo.end_time" @over="alarm">
                    </count-down>
                </div>
            </div>

            <div class="goods-des">
                <!--配送范围、是否有货-->
                <div class="goods-des-row">
                    <div class="goods-des-box">
                        <text class="row-label font-msyhl">送至</text>
                        <text class="row-info font-msyhl">{{goodsInfo.user_baiduapi_address}}</text>
                    </div>

                    <text v-if="goodsInfo.sent_status != '有货'" class="goods-status font-msyhl">{{goodsInfo.sent_status}}</text>
                </div>

                <!--运费-->
                <div class="goods-des-box">
                    <text class="row-label font-msyhl">运费</text>
                    <text v-if="goodsInfo.freight > 0" class="row-info font-msyhl">{{goodsInfo.freight | currency('¥')}}</text>
                    <text v-else class="row-info font-msyhl">卖家包邮</text>
                </div>

                <!--评价-->
                <div class="goods-des-row">
                    <div class="goods-des-box">
                        <text class="row-label font-msyhl">评价</text>
                        <text class="row-info-percent font-msyhl">{{goodsInfo.rate_percen}}</text>
                        <text class="row-info font-msyhl">好评</text>
                    </div>

                    <btn-pre @btnClick="jumpToRateTab">查看评价</btn-pre>
                </div>
            </div>

            <!--店铺-->
            <div class="goods-shop">
                <image resize="cover" class="shop-logo" :src="goodsInfo.s_logo || defaultImg"></image>

                <div class="shop-info">
                    <div class="s-row">
                        <div class="shop-name">
                            <image resize="cover" class="shop-icon" :src="shopIcon"></image>
                            <text class="shop-name-txt font-msyhl">{{goodsInfo.s_cname}}</text>
                        </div>

                        <btn-pre @btnClick="goToShop">进店逛逛</btn-pre>
                    </div>

                    <div class="s-row-flex-start">
                        <text class="shop-txt font-msyhl">宝贝数量 {{goodsInfo.s_goodsnum}}</text>
                        <text class="shop-txt font-msyhl">总销量 {{goodsInfo.s_sellnum}}</text>
                    </div>

                    <div class="s-row">
                        <text class="shop-txt font-msyhl">描述相符 {{goodsInfo.s_description_score}}</text>
                        <text class="shop-txt font-msyhl">服务态度 {{goodsInfo.s_attitude_score}}</text>
                        <text class="shop-txt shop-txt-last font-msyhl">发货速度 {{goodsInfo.s_speed_score}}</text>
                    </div>
                </div>
            </div>
        </cell>
        <!--商品信息-->

        <!--热卖商品-->
        <cell class="cell-hot" v-if="hotGoodsList.length">
            <div class="hot-goods-header">
                <image :src="leftLine" resize="cover" class="hot-goods-line"></image>
                <text class="hot-goods-txt font-msyhl">热卖商品</text>
                <image :src="leftLine" resize="cover" class="hot-goods-line hot-goods-line-rate"></image>
            </div>

            <div class="hot-goods-wrapper">
                <div class="hot-goods" v-for="(g, index) in hotGoodsList">
                    <goods-item :goods="g" :ref="'ref'+ g.id"></goods-item>
                </div>
            </div>
        </cell>
        <!--/热卖商品-->
    </list>
</div>